{% extends "public/layout.html" %}

{% block body %}
    <table class="table table-striped">
        <tr>
            <th>#</th>
            <th>用户id</th>
            <th>用户名</th>
            <th>email</th>
            <th>状态</th>
            <th>操作</th>
        </tr>
        {% for user in page_obj.object_list %}
            <tr>
                <td>{{ forloop.counter }}</td>
                <td>{{ user.id }}</td>
                <td>{{ user.username }}</td>
                <td>{{ user.email }}</td>
                <td class="user_status">
                    {% if user.is_active %}
                        <span class="glyphicon glyphicon-ok-circle text-success"></span>正常
                    {% else %}
                        <span class="glyphicon glyphicon-warning-sign text-warning"></span>禁止
                    {% endif %}
                </td>
                <td>
                    <div class="btn-group">
                        <div class="btn-group">
                            <button class="btn btn-primary btn-sm dropdown-toggle" type="button" id="dropdownMenu1"
                                    data-toggle="dropdown" aria-expanded="false">
                                修改
                                <span class="caret"></span>
                            </button>
                            <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
                                <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
                                <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a>
                                </li>
                                <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else
                                    here</a></li>
                                <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a>
                                </li>
                            </ul>
                        </div>
                        {% if user.is_active %}
                            <button type="button" class="btn btn-sm btn-warning modify_user_status" status="true"
                                    data="{{ user.id }}">禁用
                            </button>
                        {% else %}
                            <button type="button" class="btn btn-sm modify_user_status btn-info" status="false"
                                    data="{{ user.id }}">开启
                            </button>
                        {% endif %}
                    </div>
                </td>
            </tr>
        {% endfor %}
    </table>
    <div class="panel-default">
        <center>
            <ul class="pagination">
                <li><a href="/user/userlist/?page=1">首页</a></li>
                {% if  page_obj.has_previous %}
                    <li><a href="/user/userlist/?page={{ page_obj.next_page_numbe }}">上一页</a></li>
                {% endif %}
                {% for p in page_obj.paginator.page_range %}
                    <li><a href="/user/userlist/?page={{ p }}">{{ p }}</a></li>
                {% endfor %}
                {% if  page_obj.has_next %}
                    <li><a href="/user/userlist/?page={{ page_obj.next_page_numbe }}">下一页</a></li>
                {% endif %}
                <li><a href="/user/userlist/?page={{ page_obj.paginator.num_pages }}">末页</a></li>
            </ul>
        </center>
    </div>
{% endblock %}

{% block js %}
    <script>
        function change_user_status(status_td_obj, status) {
            if (status == "true") {
                status_td_obj.html('<span class="glyphicon glyphicon-warning-sign text-warning"></span>禁止')
            } else {
                status_td_obj.html('<span class="glyphicon glyphicon-ok-circle text-success"></span>正常')
            }
        }
        function modify_user_status(user_id) {
            $.post("/user/modifystatus/", {"user_id": user_id}, function (res) {
                if (res.status != 0) {
                    swal({
                        title: res.errmsg,
                        type: "error",
                        confirmButtonText: "知道了"
                    });
                }
            })
        }
        $(function () {
            $(".modify_user_status").click(function () {
                var click_obj = $(this);
                var status = click_obj.attr("status");
                if (status === "true") {
                    click_obj.removeClass("btn-warning").addClass("btn-info").attr("status", "false").text("开启");
                } else {
                    click_obj.removeClass("btn-info").addClass("btn-warning").attr("status", "true").text("禁用");
                }
                change_user_status(click_obj.parents("td").siblings(".user_status"), status);
                modify_user_status(click_obj.attr('data'));
            });
        })
    </script>
{% endblock %}

